Conversation
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
|
||
| return ( | ||
| <div> | ||
| <button onClick={() => handleAddTodo('New todo')}> |
There was a problem hiding this comment.
It would be nice to have a button to add a todo without using the optimisticKey, so it is easier to see the benefit of this api.
|
|
||
| <Experimental> | ||
|
|
||
| **This API is experimental and is not available in a stable version of React yet.** |
There was a problem hiding this comment.
What feedback does the React team want regarding optimisticKey (and other experimental APIs)?
Some APIs are mostly complete and just need testing for the next release, or for web standards to reach the point where they can be used (like ). Then there are some APIs that edge cases and additional use cases might need to be figured out about (like fragment references).
For optimisticKey it seems like this is an API that needs to be tested before being released in React 19.3 or 20
|
Awesome first pass! Two thoughts:
|
|
|
||
| <Note> | ||
|
|
||
| Compare this to the [`useOptimistic`](/reference/react/useOptimistic#optimistically-adding-to-a-list) example, which uses `crypto.randomUUID()` as the key. That approach works for showing optimistic items, but loses component state when the real item replaces it. Use `optimisticKey` when your list items have internal state you want to preserve. |
There was a problem hiding this comment.
We should update the useOptimistic example to mention the experimental API and then only use optimisticKey once it lands in Canary.
Even now, I'd prefer if we have the comparison side-by-side like suggested in https://github.com/reactjs/react.dev/pull/8326/changes#r2866143024
4 participants
WIP - this is only the claude output, which is pretty good but I need to review / verify it.